import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Textarea } from '@/components/ui/textarea';
import { cn } from '@/lib/utils';
import { useProxyStore } from '@/store/proxy';
import { useId } from 'react';

type Props = {
  children?: React.ReactNode;
  className?: string;
};

export function ProxySettingContent() {
  const useProxyTimeout = useProxyStore((state) => state.useProxyTimeout);
  const proxyList = useProxyStore((state) => state.proxyList);
  const proxyToggleInterval = useProxyStore((state) => state.proxyToggleInterval);
  const useProxyWhenGetGigaAvaliable = useProxyStore((state) => state.useProxyWhenGetGigaAvaliable);
  const dispatch = useProxyStore((state) => state.dispatch);
  const id = useId();
  return (
    <>
      <div className="flex px-3 gap-2 items-center py-4">
        <Label className="whitespace-nowrap" htmlFor={id + '-use-proxy-timeout'}>
          初始时多长时间自动切换到第一个代理设置:
        </Label>
        <Input
          value={useProxyTimeout}
          type="number"
          onChange={(event) => {
            dispatch({
              type: 'update',
              update(draftState) {
                draftState.useProxyTimeout = +event.target.value;
              },
            });
          }}
          id={id + '-use-proxy-timeout'}
          className="h-10 w-auto rounded-md border border-input px-3 py-2"
        />
      </div>
      <div className="flex px-3 gap-2 items-center mt-2">
        <Label className="whitespace-nowrap" htmlFor={id + '-use-proxy-timeout'}>
          代理 ip 的切换间隔:
        </Label>
        <Input
          value={proxyToggleInterval}
          type="number"
          onChange={(event) => {
            dispatch({
              type: 'update',
              update(draftState) {
                draftState.proxyToggleInterval = +event.target.value;
              },
            });
          }}
          id={id + '-use-proxy-timeout'}
          className="h-10 w-auto rounded-md border border-input px-3 py-2"
        />
      </div>
      <div className="flex px-3 gap-2 items-center flex-wrap mt-3">
        <Label className="whitespace-nowrap" htmlFor={id + ''}>
          代理设置:
        </Label>
        <Textarea
          value={proxyList}
          onChange={(event) => {
            dispatch({
              type: 'update',
              update(draftState) {
                draftState.proxyList = event.target.value;
              },
            });
          }}
          className="basis-full mt-2"
        ></Textarea>

        <div className="flex px-3 gap-2 py-4 items-center">
          <Checkbox
            checked={useProxyWhenGetGigaAvaliable}
            onCheckedChange={(state) => {
              dispatch({
                type: 'update',
                update(draftState) {
                  draftState.useProxyWhenGetGigaAvaliable = state ? true : false;
                },
              });
            }}
            id={id + ''}
            className="rounded-[2px]"
          />
          <Label className="whitespace-nowrap mb-0" htmlFor={id + ''}>
            是否在获取 giga 库存遇到验证码时使用代理,而不使用 python 服务
          </Label>
        </div>
      </div>
    </>
  );
}
export default function ProxySetting({ children, className, ...props }: Props) {
  return (
    <div className={cn(className, 'flex flex-col')} {...props}>
      <div className="grow relative">
        <ScrollArea className="border rounded-sm !absolute h-full w-full p-2 pt-2">
          <ProxySettingContent />
        </ScrollArea>
      </div>
    </div>
  );
}
